*{
    padding: 0;
    margin: 0;
}
div{
    width: 200px;
    height: 100px;
    margin: 100px auto;
    position: relative;
    perspective: 11000px;
    transform-style: preserve-3d;
    animation:run 10s linear infinite;
}
figure{
    width: 200px;
    height: 100px;
    display: block;
    border: 2px solid;
    position: absolute;
}
figure:nth-child(1){
    transform: rotateY(0deg) translateZ(310px);
    background: url("../images/q1.jpg");
    background-size: 200px 100px;
}
figure:nth-child(2){
    transform: rotateY(40deg) translateZ(310px);
    background: url("../images/q2.jpg");
    background-size: 200px 100px;
}
figure:nth-child(3){
    transform: rotateY(80deg) translateZ(310px);
    background: url("../images/q3.jpg");
    background-size: 200px 100px;
}
figure:nth-child(4){
    transform: rotateY(120deg) translateZ(310px);
    background: url("../images/q4.jpg");
    background-size: 200px 100px;
}
figure:nth-child(5){
    transform: rotateY(160deg) translateZ(310px);
    background: url("../images/q5.jpg");
    background-size: 200px 100px;
}
figure:nth-child(6){
    transform: rotateY(200deg) translateZ(310px);
    background: url("../images/q6.jpg");
    background-size: 200px 100px;
}
figure:nth-child(7){
    transform: rotateY(240deg) translateZ(310px);
    background: url("../images/q7.jpg");
    background-size: 200px 100px;
}
figure:nth-child(8){
    transform: rotateY(280deg) translateZ(310px);
    background: url("../images/q8.jpg");
    background-size: 200px 100px;
}
figure:nth-child(9){
    transform: rotateY(320deg) translateZ(310px);
    background: url("../images/q9.jpg");
    background-size: 200px 100px;
}
@keyframes run{
    from{
        transform:rotateY(0deg);
    }
    to{
        transform:rotateY(360deg);
    }
}
div:hover{
    animation-play-state:paused;
}